<%include pub/head.html%>
  <base href="/build/">
  </head>
  <style type="text/css">
    @keyframes line-scale {
      0% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
      }

      50% {
        -webkit-transform: scaley(0.4);
        transform: scaley(0.4);
      }

      100% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
      }
    }

    .line-scale>div:nth-child(1) {
      -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
      animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
    }

    .line-scale>div:nth-child(2) {
      -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
      animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
    }

    .line-scale>div:nth-child(3) {
      -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
      animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
    }

    .line-scale>div:nth-child(4) {
      -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
      animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
    }

    .line-scale>div:nth-child(5) {
      -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
      animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
    }

    .line-scale>div {
      background-color: #00bcd4;
      width: 4px;
      height: 35px;
      border-radius: 2px;
      margin: 2px;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      display: inline-block;
    }

    .loader-inner {
      margin: auto;
      width: 60px;
      margin-top: 150px;
    }

    .loader-text {
      text-align: center;
      margin-top: 6px;
    }

    .skel-bar {
      text-align: center;
      font-size: 16px;
      margin: 50px 0;
    }

    .like-this {
      width: 60px;
      margin: 6px auto;
      height: 60px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 9px rgba(0, 0, 0, .1);
      text-align: center;
      line-height: 54px;
    }

    .like-this.active {
      background: #f9d3be
    }

    .like-this:active {
      background: #f9f9f9
    }

    .weitajia {
      margin-top: 5px;
      color: #999;
      font-size: 13px;
    }
  </style>

  <body>
    <header>
      <nav class="xu-nav-bar">
        <div class="nav-logo">
          <a href="/" class="logo-a">
            <h3>人工智能机器人编程社区</h3>
          </a>
        </div>
      </nav>
    </header>

    <div class="h5-main-panel">
      <div class="row">
        <%if(works){%>
          <input type="hidden" value="<%- works._id%>" id="works_id" />
          <div class="wroks-content-panel no-pb">
            <div class="works-dis-panel row">
              <div class="h5-w-dis">
                <p style="color:#999;font-size: 14px !important">
                  项目较大，如没有出现，请耐心等待一会儿。</p>
                <input type="text" id="api_base" hidden value="">
                <div id="splash" aria-hidden="true">
                  <noscript>
                    <h1>Enable JavaScript</h1>
                  </noscript>
                  <div id="splash-content">
                    <div id="splash-spinner"></div>
                  </div>
                </div>
                <script>
                  (function () {
                    document.querySelector('#splash-content').style.display = 'block';

                  })();
                </script>
                <div id="app">

                  <div class="loader-scratch">
                    <div class="loader-inner line-scale">
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                    </div>
                    <p class="loader-text">正在加载，请稍等...</p>
                  </div>

                </div>
                <script src="js/vendors~addon-settings~credits~editor~embed~fullscreen~player.js"></script>
                <script src="js/vendors~editor~embed~fullscreen~player.js"></script>
                <script src="js/editor~embed~fullscreen~player.js"></script>
                <script src="js/embed.js"></script>
              </div>
              <div class="panel-container f-cb">
                <div class="sxzu-bar">
                  <div class="key left arrow-left" id="mleftBtn"></div>
                  <div class="key down arrow-down" id="mdownBtn"></div>
                  <div class="key right arrow-right" id="mrightBtn"></div>
                  <div class="key up arrow-up" id="mupBtn"></div>
                </div>
                <div class="space f-fr" id="mspaceBtn"></div>
              </div>
              <div class="h5-w-dis-msg">
                <div class="w-cot-msg">
                  <h4 class="title">作品名称</h4>
                  <p>
                    <%- works.title%>
                  </p>
                </div>
                <div class="w-cot-msg">
                  <h4 class="title">操作说明</h4>
                  <%if(works.explain){%>
                    <p>
                      <%- works.explain%>
                    </p>
                    <%}else{%>
                      <p>暂无操作说明</p>
                      <%}%>
                </div>
              </div>
              <div class="skel-bar">
                <div class="like-this">
                  <img src="/img/icon/zan.svg" width="40">
                </div>
                <span id="zanNum">
                  <%= works.zan%>
                </span>
                <div class="weitajia">为TA加油</div>
              </div>
            </div>
          </div>
          <%}%>
      </div>
    </div>
    <%include pub/foot.html%>
      <%include pub/script.html%>
        <script type="text/javascript">
          var worksplayId = '<%- works.worksid %>';
          var files_msg = []
        </script>
  </body>

  </html>